import React from 'react';
import PropTypes from 'prop-types';

class Vote extends React.Component {
	static defaultProps = {
		supNum: 0,
		oppNum: 0
	};
	static propTypes = {
		title: PropTypes.string.isRequired,
		supNum: PropTypes.number,
		oppNum: PropTypes.number
	};

	state = {
		supNum: this.props.supNum,
		oppNum: this.props.oppNum
	};

	render() {
		let { title } = this.props;
		let { supNum, oppNum } = this.state;

		return <section>
			<header>
				<h3>{title}</h3>
				<span>N:{supNum + oppNum}</span>
			</header>
			<main>
				<p>支持人数：{supNum}</p>
				<p>反对人数：{oppNum}</p>
			</main>
			<footer>
				<button onClick={this.handle.bind(this, 0)}>支持</button>
				<button onClick={this.handle.bind(this, 1)}>反对</button>
			</footer>
		</section>;
	}
	handle = type => {
		if (type === 0) {
			this.setState({
				supNum: this.state.supNum + 1
			});
			// this.forceUpdate();//=>强制更新（跳过shouldComponentUpdate这一层，直接通知视图重新渲染）
			return;
		}
		this.setState({
			oppNum: this.state.oppNum + 1
		});
	};
	
	shouldComponentUpdate(nextProps, nextState) {
		//=>原来的属性和状态
		// this.props || this.state
		//=>即将要改变的新状态
		// nextProps || nextState
		// return false;//=>true允许更新，反之false是阻止更新（阻止的不是状态的改变，阻止的是视图是否重新渲染）
	}
}

export default Vote;